﻿@{
    ViewBag.Title = "Product Types";
}
<link href="~/Content/css/product.css" rel="stylesheet" />
<table id="marbleTable" class="stripe row-border order-column" style="width: 100%">
            <thead>
                <th>ID</th>
                <th>Type</th>
                <th>Description</th>
                <th>ReportGroup</th>
                <th>Active</th>
                <th>CardSale</th>
                <th>LastUpdatedBy</th>
                <th>LastUpdatedDate</th>
            </thead>
            @foreach (var item in ViewBag.productTypes)
            {  
                <tr>
                    <td> <lable class="fixedCol1">@(item.Id == 0 ? "" : item.Id) </lable> </td>
                    <td>
                        <input class="fixedCol2" type="text" value="@item.Type"  />
                    </td>
                    <td>
                        <input type="text" value="@item.Description"  />
                    </td>
                    <td>
                        <input type="text" value="@item.ReportGroup"  />
                    </td>
                    <td>
                        <input type="checkbox"  @(item.Active ? "checked='checked'" : "") value="@item.Active" />
                    </td>
                    <td>
                        <input type="checkbox"  @(item.CardSale ? "checked='checked'" : "") value="@item.CardSale" />
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedBy"  disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedDate"  disabled/>
                    </td>
                </tr>  
            }
        </table>
<div class="action">
    <button class="btn btn-primary btn-md" role="button" id="saveproducttypes" onclick="SaveProductTypes()" disabled>Save</button>
    <button class="btn btn-primary btn-md" role="button" id="addRow">Add Product Type </button>
    <button class="btn btn-primary btn-md" role="button" onclick="history.back();"  id="back">Back</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/Marble/index'"" >Close</button>
</div>
<script>
    $(':input').on('change', function () {
        $("#saveproducttypes").attr("disabled", false);
    });
    $(document).ready(function () {
        var table = $('#marbleTable').DataTable({
            scrollY: "400px",
            scrollX: true,
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            // paging: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            },
            //order: [[ 0, "desc" ]],
            fixedColumns: {
                leftColumns: 2
            }
        });
        var counter = 1;

        $('#addRow').on('click', function () {
            $("#saveproducttypes").attr("disabled", false);
            var fixedcolumn1values = $('.DTFC_Cloned lable.fixedCol1');
            var fixedcolumn3values = $('.DTFC_Cloned input.fixedCol3');
            table.row.add([
                '<lable class="fixedCol1"></lable>',
                '<input class="fixedCol2" type="text" value="" />',
                '<input type="text" value="" />',
                '<input type="text" value="" />',
                '<input type="checkbox" />',
                '<input type="checkbox" />',
                '<input type="text" value="" disabled/>',
                '<input type="text" value="" disabled/>',
            ]).draw(false);

            for (var i = 0, j = fixedcolumn1values.length; i < j; i++) {
                $('.DTFC_Cloned lable.fixedCol1')[i].innerHTML = fixedcolumn1values[i].innerHTML;
            }
            for (var i = 0, j = fixedcolumn3values.length; i < j; i++) {
                $('.DTFC_Cloned input.fixedCol3')[i].value = fixedcolumn3values[i].value;
            }
        });
         $(".tblRow").on("change", function (e) { UpdatedList($(this).parent().index()); });
    });

    function SaveProductTypes() {
        if (updatedArray.length > 0) {
            var items = [];
            var table = document.getElementById('marbleTable');
            var fixedcolumn1 = $('.DTFC_Cloned lable.fixedCol1');
            var fixedcolumn2 = $('.DTFC_Cloned input.fixedCol2');

            for (var r = 0, n = table.rows.length; r < n; r++) {
                if (updatedArray.includes(r)) {
                    var rowIndex = r + 1;
                    items.push({
                        Id: fixedcolumn1[r].innerHTML,
                        Type: fixedcolumn2[r].value,
                        Description: table.rows[rowIndex].cells[2].children[0].value,
                        ReportGroup: table.rows[rowIndex].cells[3].children[0].value,
                        Active: table.rows[rowIndex].cells[4].children[0].checked,
                        CardSale: table.rows[rowIndex].cells[5].children[0].checked
                    });
                }
            }

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("UpdateProductType", "Product")',
                data: JSON.stringify({ productTypes: items }),
                dataType: "json",
                success: function (data) {
                    alert('Data Saved');
                    location.reload();
                },
                error: function (e) {
                    alert(e);
                }
            });
        }
    }
   
    var updatedArray = [];
    function UpdatedList(index) {
        if (!updatedArray.includes(index)) {
            updatedArray.push(index);
        }
    }
</script>
